import { useState } from "react";

import HomeTop from "./components/HomeTop";
import HomeTotal from "./components/HomeTotal";
import RedeemPledge from "./components/RedeemPledge";
import Overview from "./components/Overview";

import Modal from "@/components/Modal";

import "./index.scss";

const list: any = [];

for (let i = 0; i < 12; i++) {
  const obj = {
    id: i + 1,
    has: i < 10 ? true : false,
    grade: 1,
  };

  list.push(obj);
}

const Home = () => {
  const [open, setOpen] = useState(false);
  const [modalType, setModalType] = useState(-1);

  /**
   * 打开弹窗
   */
  const openModal = (type: number) => {
    setModalType(type);
    setOpen(true);
  };

  // 算力介绍内容
  const modalContent = (
    <div>
      {" "}
      <div>算力（Computing Power）</div>
      <div>
        是项目中驱动挖矿过程的核心要素。用户注册时会获得基础算力，还可以通过完成平台任务、邀请好友等方式免费获得更多算力，或者通过购买和升级"{" "}
        NFT 来提升算力。个人总算力越高，挖掘 KnowsCoin 的数量也就越多。
      </div>
      <div>挖矿公式： </div>
      <div>(1 KnowsCoin = 1 算力) </div>
      <div>挖矿奖励 = (个人总算力 / 全网总算力) × 每块奖励 </div>
      <div>解释： •</div>
      <div>
        个人总算力：注册算力、邀请算力、任务算力、NFT
        算力以及挖掘出来的KnowsCoin
      </div>
    </div>
  );

  // 签到内容
  const checkList = [
    {
      id: 1,
      title: "Day 1",
    },
    {
      id: 2,
      title: "Day 2",
    },
    {
      id: 3,
      title: "Day 3",
    },
    {
      id: 4,
      title: "Day 4",
    },
    {
      id: 5,
      title: "Day 5",
    },
    {
      id: 6,
      title: "Day 6",
    },
    {
      id: 7,
      title: "Day 7",
    },
  ];
  const checkInContent = (
    <div className="check-in-content">
      <div className="days-list-box">
        <ul>
          {checkList.map((item) => (
            <li key={item.id} className="item">
              <div
                className={
                  item.id < 2
                    ? "item-box before"
                    : item.id == 2
                    ? "item-box active"
                    : "item-box"
                }
              >
                <div className="num">+2 CP</div>
                <div className="hat">
                  {item.id < 2 ? (
                    <img src="./images/checkin_hat.png" />
                  ) : (
                    <img src="./images/checkin_hat_gray.png" />
                  )}
                </div>
                <div className="title">
                  {item.id < 2 ? "Checked In" : item.title}
                </div>
              </div>
            </li>
          ))}
        </ul>
      </div>
      <div className="btn-box">
        <div className="btn">Check In Now</div>
      </div>
    </div>
  );

  return (
    <>
      <div className="home-container">
        {/* 顶部 */}
        <HomeTop />

        {/* 总数 */}
        <HomeTotal openModal={openModal} />

        {/* 赎回质押 */}
        <RedeemPledge />

        {/* 概况 */}
        <Overview />
      </div>

      {/* 弹窗 */}
      <Modal
        onClose={setOpen}
        open={open}
        title={
          modalType == 1
            ? "Introduction to Computing Power"
            : modalType == 2
            ? "Check-In"
            : null
        }
        content={
          modalType == 1 ? modalContent : modalType == 2 ? checkInContent : null
        }
      />
    </>
  );
};
export default Home;
